<template>
  <div class="challenge-community">
    <!-- 标签页导航 -->
    <div class="tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab.key"
        :class="['tab-header', { active: activeTab === tab.key }]"
        @click="activeTab = tab.key"
      >
        {{ tab.title }}
      </div>
    </div>
    
    <!-- 动态消息 -->
    <div v-if="activeTab === '1'" class="activity-stream">
      <div v-for="post in activities" :key="post.id" class="activity-post">
        <div class="post-header">
          <img :src="post.user.avatar" :alt="post.user.name" class="post-avatar" />
          <div class="post-meta">
            <span class="post-author">{{ post.user.name }}</span>
            <span class="post-time">{{ post.timestamp }}</span>
          </div>
        </div>
        
        <div class="post-content">
          <p>{{ post.content }}</p>
          <img v-if="post.image" :src="post.image" alt="打卡照片" class="post-image" />
        </div>
        
        <div class="post-actions">
          <button 
            class="btn-text" 
            @click="handleLike(post.id)"
          >
            <i :class="['icon', post.isLiked ? 'icon-heart-filled' : 'icon-heart']"></i>
            {{ post.likes }} 点赞
          </button>
          <button class="btn-text">
            <i class="icon icon-comment"></i>
            {{ post.comments }} 评论
          </button>
        </div>
      </div>
    </div>
    
    <!-- 官方公告 -->
    <div v-if="activeTab === '2'" class="announcements">
      <div class="countdown-timer">
        <h3>挑战结束倒计时</h3>
        <div class="timer">
          <span class="timer-unit">{{ timeLeft.days }}天</span>
          <span class="timer-unit">{{ timeLeft.hours }}时</span>
          <span class="timer-unit">{{ timeLeft.minutes }}分</span>
          <span class="timer-unit">{{ timeLeft.seconds }}秒</span>
        </div>
      </div>
      
      <div 
        v-for="announcement in announcements" 
        :key="announcement.id" 
        :class="['announcement', { important: announcement.isImportant }]"
      >
        <h3>{{ announcement.title }}</h3>
        <p>{{ announcement.content }}</p>
        <span class="announcement-date">{{ announcement.date }}</span>
      </div>
    </div>
    
    <!-- 常见问题 -->
    <div v-if="activeTab === '3'" class="faqs">
      <div v-for="faq in faqs" :key="faq.id" class="faq-item">
        <div 
          class="faq-question" 
          @click="toggleFaq(faq.id)"
        >
          <span>{{ faq.question }}</span>
          <span class="faq-toggle">{{ openFaqs.includes(faq.id) ? '▲' : '▼' }}</span>
        </div>
        <div v-if="openFaqs.includes(faq.id)" class="faq-answer">
          <p>{{ faq.answer }}</p>
        </div>
      </div>
      
      <div class="support-action">
        <button class="btn btn-primary" @click="handleContactSupport">
          联系客服
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChallengeCommunity',
  props: {
    activities: {
      type: Array,
      required: true
    },
    announcements: {
      type: Array,
      required: true
    },
    faqs: {
      type: Array,
      required: true
    },
    endTime: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      activeTab: '1',
      timeLeft: this.calculateTimeLeft(),
      openFaqs: [],
      tabs: [
        { key: '1', title: '动态消息' },
        { key: '2', title: '官方公告' },
        { key: '3', title: '常见问题' }
      ]
    };
  },
  created() {
    this.timer = setInterval(() => {
      this.timeLeft = this.calculateTimeLeft();
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    // 计算倒计时
    calculateTimeLeft() {
      const difference = new Date(this.endTime).getTime() - new Date().getTime();
      if (difference <= 0) {
        return { days: 0, hours: 0, minutes: 0, seconds: 0 };
      }
      
      return {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60)
      };
    },
    
    // 点赞动态
    handleLike(postId) {
      this.$emit('like', postId);
    },
    
    // 评论动态
    handleComment(postId, comment) {
      this.$emit('comment', postId, comment);
    },
    
    // 联系客服
    handleContactSupport() {
      this.$emit('contact-support');
    },
    
    // 切换FAQ显示
    toggleFaq(id) {
      if (this.openFaqs.includes(id)) {
        this.openFaqs = this.openFaqs.filter(item => item !== id);
      } else {
        this.openFaqs.push(id);
      }
    }
  }
}
</script>

<style scoped>
/* 组件特定样式，可以从Challenge.css中导入或在这里定义 */
.tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.tab-header {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab-header.active {
  border-bottom-color: #42b983;
  font-weight: bold;
}

.activity-post {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.faq-item {
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
}

.faq-answer {
  padding: 10px 0;
  color: #666;
}
</style> 